<template>
  <div style="width: 100%; height: 100%">
    <Echarts :style="style" :option="option" />
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from "vue";
import Echarts from "@/components/Echarts.vue";
//占比数值  总数为100
const option = {
  title: {
    text: 120 + "%",
    textStyle: {
      fontSize: 50,
      fontFamily: "Microsoft Yahei",
      fontWeight: "bold",
      color: "#fff",
    },
    x: "center",
    y: "center",
  },
  series: [
    {
      type: "liquidFill",
      radius: "95%",
      center: ["50%", "50%"],
      color: ["#1991d2", "#3831f3", "#1991d2"],
      data: [1, 1, 1],
      backgroundStyle: {
        // borderWidth: 1,
        color: "#1f2c52",
      },
      label: {
        normal: {
          formatter: "",
        },
      },
      outline: {
        show: false,
      },
    },
  ],
};
export default defineComponent({
  components: {
    Echarts,
  },
  props: {
    params: {
      type: Array as PropType<string[][]>,
      required: true,
    },
    style: {
      type: Object as PropType<{ weight: number; height: number }>,
    },
  },
  setup() {
    return { option };
  },
});
</script>
